<template>
  <Transition name="xueyan">
    <div class="xueyanMessage" :style="style[type]" v-show="visible">
      <!-- 上面绑定的是样式 -->
      <!-- 不同提示图标会变 -->
      <i class="iconfont" :class="[style[type].icon]"></i>
      <span class="text">{{ text }}</span>
    </div>
  </Transition>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  const props = defineProps({
    text: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      // warn 警告  error 错误  success 成功
      default: 'warn'
    },
    duration: {
      type: Number,
      default: 2000
    }
  })

  // 定义一个对象，包含三种情况的样式，对象key就是类型字符串
  const style = {
    warn: {
      icon: 'icon-error',
      color: '#fff',
      backgroundColor: 'rgb(255, 126, 14)',
      borderColor: 'rgb(250, 236, 216)'
    },
    error: {
      icon: 'icon-error-',
      color: '#fff',
      backgroundColor: '#F08080ee',
      borderColor: 'rgb(253, 226, 226)'
    },
    success: {
      icon: 'icon-successed',
      color: '#fff',
      backgroundColor: '#90EE90',
      borderColor: 'rgb(225, 243, 216)'
    },
    info: {
      icon: 'icon-error',
      color: '#222',
      backgroundColor: '#eee',
      borderColor: '#ccc'
    }
  }
  const visible = ref(false)
  onMounted(() => {
    visible.value = true
    setTimeout(() => {}, props.duration)
  })
</script>

<style scoped lang="less">
  .xueyanMessage {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 10px 20px;
    border-radius: 10px;
    width: 400px;
    color: #fff;
    box-shadow: #eee 2px 2px 20px 2px;
    i {
      margin-right: 4px;
      vertical-align: middle;
    }
    .text {
      vertical-align: middle;
    }
  }

  .text {
    text-align: left;
  }

  /* 动画进入开始时状态 */
  .xueyan-enter {
    opacity: 0;
    transform: translate(-50%, -100%);
  }
  .xueyan-enter-to {
    transform: translate(-50%, 0%);
  }
  /* 动画进入过程动画效果 */
  .xueyan-enter-active {
    transition: all 0.4s ease;
  }
  /* 动画离开开始时状态 */
  .xueyan-leave {
    transform: translateY(0%);
  }
  /* 动画结束时动画 */
  .xueyan-leave-to {
    opacity: 0;
    transform: translate(-50%, -100%);
  }
  /* 动画离开过程动画效果 */
  .xueyan-leave-active {
    transition: all 0.4s ease;
  }
</style>
